﻿<div>
    <h1>Busy overlay</h1>
    <p>
        The following predefined styles are available:
        <ul>
            <li><code>MaterialBusyOverlayCircular</code></li>
            <li><code>MaterialBusyOverlayCircularProgress</code></li>
            <li><code>MaterialBusyOverlayLinear</code></li>
            <li><code>MaterialBusyOverlayLinearProgress</code></li>
        </ul>
    </p>

    <h2>Screenshots</h2>
    <img src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/BusyOverlay.png" alt="Busy overlay" />

    <h2>Code example</h2>
   
    <p>Busy overlay control</p>
    <pre class="language-markup"><code class="language-markup">
&lt;mde:BusyOverlay IsBusy="{Binding Path=IsBusy}" 
    Progress="{Binding Path=Progress}" 
    Style="{StaticResource MaterialBusyOverlayCircular}" />
    </code></pre>

    <p>Busy overlay show and progress bindings</p>
    <pre class="language-markup"><code class="language-markup">
public class BusyOverlayViewModel : ViewModel
{
    private bool _isBusy;
    public bool IsBusy
    {
        get => _isBusy;
        set
        {
            _isBusy = value;
            OnPropertyChanged(nameof(IsBusy));
        }
    }

    private int _progress;
    public int Progress
    {
        get => _progress;
        set
        {
            _progress = value;
            OnPropertyChanged(nameof(Progress));
        }
    }

    public BusyOverlayViewModel() : base()
    {
        _isBusy = false;
        _progress = 0;
    }

    public async Task BeBusyAsync()
    {
        try
        {
            Progress = 0;
            IsBusy = true;

            //Simulate work and update progress
            await Task.Run(async () =>
            {
                int progress = 0;

                while (progress < 100)
                {
                    await Task.Delay(250);

                    progress += 10;
                    Progress = progress;
                }
            });
        }
        finally
        {
            IsBusy = false;
        }
    }
}
    </code></pre>
</div>